<template>
  <el-config-provider :locale="zhCn">
    <SchemaTable :schema="schema" :getData="getTrademarkList">
      <template #logoUrl="{ row }">
        <img
          :src="row.logoUrl"
          :alt="row.tmName"
          style="width: 100px; height: 100px"
        />
      </template>
      <template #operator="{ row }">
        <el-button type="primary" link>更新</el-button>
        <el-button type="primary" link>删除</el-button>
      </template>
    </SchemaTable>
    <Trademark />
  </el-config-provider>
</template>

<script lang="ts" setup>
defineOptions({
  name: "App",
});
// @ts-ignore
import axios from "axios";
// @ts-ignore
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import Trademark from "./views/trademark/index.vue";
import SchemaTable from "./components/SchemaTable/index.vue";
import { ref } from "vue";

const getTrademarkList = async (currentPage: number, pageSize: number) => {
  const res = await axios.get(
    `http://gmall-h5-api.atguigu.cn/admin/product/baseTrademark/${currentPage}/${pageSize}`
  );
  return {
    total: res.data.data.total,
    data: res.data.data.records,
  };
};

const schema = ref([
  {
    label: "序号",
    type: "index",
    align: "center",
    width: 60,
    key: "index",
  },
  {
    label: "品牌名称",
    key: "tmName",
    prop: "tmName",
  },
  {
    label: "品牌Logo",
    key: "logoUrl",
    slot: "logoUrl",
  },
  {
    label: "操作",
    key: "operator",
    slot: "operator",
    width: 250,
  },
]);
</script>

<style scoped lang="scss"></style>
